<!doctype html>
<html lang="zh-CN">
<head>
  <!-- 必须的 meta 标签 -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

  <!-- Bootstrap 的 CSS 文件 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
        integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">


  <title>WebSocket1</title>

  <style>
    form {
      width: 820px;
      margin: auto;
    }

    .div1 {
      width: 820px;
      height: 500px;
      border: #000000;
      border-width: thin;
      border-style: solid;
    }

    .div2 {
      text-align: center;
      width: 800px;
      height: 50px;
    }
  </style>

  <script>
    function clearData() {
      $("#div1").html("");
    }


    var socket;

    function openSocket() {
      if (typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log("您的浏览器支持WebSocket");

        //websocket地址
        var socketUrl = "ws://localhost:8088/websocket/20";
        console.log(socketUrl);
        if (socket != null) {
          socket.close();
          socket = null;
        }
        socket = new WebSocket(socketUrl);
        //打开事件
        socket.onopen = function() {
          console.log("websocket已打开");
          $("#div1").append("websocket已打开" + "<br \>");
        };
        //获得消息事件
        socket.onmessage = function(msg) {
          console.log("获得消息事件",msg.data);
          $("#div1").append("接收到消息：" + msg.data + "<br \>");

        };
        //关闭事件
        socket.onclose = function() {
          console.log("websocket已关闭");
          $("#div1").append("websocket已关闭" + "<br \>");
        };
        //发生了错误事件
        socket.onerror = function() {
          console.log("websocket发生了错误");
          $("#div1").append("websocket发生了错误" + "<br \>");
        }
      }
    }

    function sendMsg() {
      if (typeof(WebSocket) == "undefined") {
        console.log("您的浏览器不支持WebSocket");
      } else {
        console.log('发送消息：{"toUserId":"' + $("#toUserId").val() + '","msg":"' + $("#msg").val() + '"}');
        socket.send('{"toUserId":"' + $("#toUserId").val() + '","msg":"' + $("#msg").val() + '"}');

        var msg = document.getElementById("msg").value;
        $("#div1").append("发送消息：" + msg + "<br \>");
        document.getElementById("msg").value = "";
      }


    }
  </script>

</head>
<body>

<h1 align="center">WebSocket测试Demo</h1><br />
<form class="form-inline">

  <div class="form-group mx-sm-3 mb-2">
    <label for="toUserId" class="sr-only">toUserId</label>
    <input type="text" class="form-control" id="toUserId" placeholder="toUserId">
  </div>
  <div class="form-group mb-2">
    <label for="msg" class="sr-only">消息內容</label>
    <input type="text" class="form-control" id="msg" placeholder="消息內容">
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <button type="button" class="btn btn-primary" onclick="openSocket()">开启socket</button>
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <button type="button" class="btn btn-danger" onclick="sendMsg()">发送消息</button>
  </div>
  <div class="form-group mx-sm-3 mb-2">
    <button type="button" class="btn btn-secondary" onclick="clearData()">清空内容</button>
  </div>
  <div class="div2"></div>
  <div class="div1" id="div1"></div>

</form>

</body>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-7ymO4nGrkm372HoSbq1OY2DP4pEZnMiA+E0F3zPr+JQQtQ82gQ1HPY3QIVtztVua" crossorigin="anonymous">
</script>

</html>

